<template>
    <div>
        <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        >
        <el-form-item label="用户名" prop="phone">
            <el-input v-model.number="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        var phone = (rule, value, callback) => {
        if (!value) {
            return callback(new Error("电话号码不能为空"));
        }
        setTimeout(() => {
            if (!Number.isInteger(value)) {
            callback(new Error("请输入数字值"));
            } else {
                callback()
            }
        }, 1000);
        };
        var validatePass = (rule, value, callback) => {
        if (value === "") {
            callback(new Error("请输入密码"));
        } else {
            if (this.ruleForm.checkPass !== "") {
            this.$refs.ruleForm.validateField("checkPass");
            }
            callback();
        }
        };
        var validatePass2 = (rule, value, callback) => {
        if (value === "") {
            callback(new Error("请再次输入密码"));
        } else if (value !== this.ruleForm.pass) {
            callback(new Error("两次输入密码不一致!"));
        } else {
            callback();
        }
        };
        return {
        ruleForm: {
            pass: "",
            checkPass: "",
            phone:''
        },
        rules: {
            pass: [{ validator: validatePass, trigger: "blur" }],
            checkPass: [{ validator: validatePass2, trigger: "blur" }],
            phone: [{ validator: phone, trigger: "blur" }]
        }
        };
    },
    methods: {
        submitForm(formName) {
        this.$refs[formName].validate(valid => {
            if (valid) {
            alert("注册成功");
            let params = {
                userName:this.ruleForm.phone,
                userPass:this.ruleForm.pass
            }
            this.$api.$post("/addUserInfo",{params:params}).then((res)=>{
                console.log(res)
                this.$router.push({name:'login'})
            })
            } else {
            console.log("error submit!!");
            return false;
            }
        });
        },
        resetForm(formName) {
        this.$refs[formName].resetFields();
        }
    }
};
</script>